$btnRadius: 2px;
$btnFontSize: 14px;

$btnWidthXL: 160px;
$btnHeightXL: 40px;
$btnWidthMD: 120px;
$btnHeightMD: 32px;
$btnWidthSM: 80px;
$btnHeightSM: 26px;

/* Primary */
.btn-Primary-xl {
  text-align: center;
  border-radius: $btnRadius;
  height: $btnHeightXL;
  min-width: $btnWidthXL;
  background-color: $Primary;
  font-size: $btnFontSize;
  color: $White;
  border: none;
  outline: none;
}

.btn-Primary-xl:hover {
  background-color: $Primary_lightest;
  border: none;
  outline: none;
  cursor: pointer;
}

.btn-Primary-xl:active {
  background-color: $Primary_lighter;
  border: none;
  outline: none;
}

.btn-Primary-xl:disabled {
  background-color: $Gray_light;
  border: none;
  outline: none;
}

/* md */
.btn,
.btn-Primary-md {
  text-align: center;
  border-radius: $btnRadius;
  height: $btnHeightMD;
  min-width: $btnWidthMD;
  background-color: $Primary;
  font-size: $btnFontSize;
  color: $White;
  border: none;
  outline: none;
}

.btn:hover,
.btn-Primary-md:hover {
  background-color: $Primary_lightest;
  border: none;
  outline: none;
  cursor: pointer;
}

.btn:active,
.btn-Primary-md:active {
  background-color: $Primary_lighter;
  border: none;
  outline: none;
}

.btn:disabled,
.btn-Primary-md:disabled {
  background-color: $Gray_light;
  border: none;
  outline: none;
}

/* sm */
.btn-Primary-sm {
  text-align: center;
  border-radius: $btnRadius;
  height: $btnHeightSM;
  min-width: $btnWidthSM;
  background-color: $Primary;
  font-size: $btnFontSize;
  color: $White;
  border: none;
  outline: none;
}

.btn-Primary-sm:hover {
  background-color: $Primary_lightest;
  border: none;
  outline: none;
  cursor: pointer;
}

.btn-Primary-sm:active {
  background-color: $Primary_lighter;
  border: none;
  outline: none;
}

.btn-Primary-sm:disabled {
  background-color: $Gray_light;
  border: none;
  outline: none;
}

/* Secondary */
.btn-Secondary-xl {
  text-align: center;
  border-radius: $btnRadius;
  height: $btnHeightXL;
  min-width: $btnWidthXL;
  background-color: transparent;
  font-size: $btnFontSize;
  color: $Primary;
  border: 1px solid $Primary;
  outline: none;
}

.btn-Secondary-xl:hover {
  color: $Primary_lightest;
  border: 1px solid $Primary_lightest;
  outline: none;
  cursor: pointer;
}

.btn-Secondary-xl:active {
  color: $Primary_lighter;
  border: 1px solid $Primary_lighter;
  outline: none;
}

.btn-Secondary-xl:disabled {
  color: $Gray_light;
  border: 1px solid $Gray_light;
  outline: none;
}

/* md */
.btn-Secondary-md {
  text-align: center;
  border-radius: $btnRadius;
  height: $btnHeightMD;
  min-width: $btnWidthMD;
  background-color: transparent;
  font-size: $btnFontSize;
  color: $Primary;
  border: 1px solid $Primary;
  outline: none;
}

.btn-Secondary-md:hover {
  color: $Primary_lightest;
  border: 1px solid $Primary_lightest;
  outline: none;
  cursor: pointer;
}

.btn-Secondary-md:active {
  color: $Primary_lighter;
  border: 1px solid $Primary_lighter;
  outline: none;
}

.btn-Secondary-md:disabled {
  color: $Gray_light;
  border: 1px solid $Gray_light;
  outline: none;
}

/* sm */
.btn-Secondary-sm {
  text-align: center;
  border-radius: $btnRadius;
  height: $btnHeightSM;
  min-width: $btnWidthSM;
  background-color: transparent;
  font-size: $btnFontSize;
  color: $Primary;
  border: 1px solid $Primary;
  outline: none;
}

.btn-Secondary-sm:hover {
  color: $Primary_lightest;
  border: 1px solid $Primary_lightest;
  outline: none;
  cursor: pointer;
}

.btn-Secondary-sm:active {
  color: $Primary_lighter;
  border: 1px solid $Primary_lighter;
  outline: none;
}

.btn-Secondary-sm:disabled {
  color: $Gray_light;
  border: 1px solid $Gray_light;
  outline: none;
}
